<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap-grid.min.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
	<script>
		const serviceId = 'xxxxxx';  // 填入 设置-基本信息-Service ID
		const fileUploadToken = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';  // 填入 设置-客户端文件上传-客户端文件上传token
	</script>
	<style>.demo{padding:20px 0;background:linear-gradient(to right,#7ab6b6 50%,#e5cfaa 50%)}.form-horizontal{background-color:#fff;font-family:Arimo,sans-serif;text-align:center;padding:50px 30px 50px;box-shadow:12px 12px 0 0 rgba(0,0,0,.3)}.form-horizontal .heading{color:#555;font-size:30px;font-weight:600;letter-spacing:1px;text-transform:capitalize;margin:0 0 50px 0}.form-horizontal .form-group{margin:0 auto 30px;position:relative}.form-horizontal .form-group:nth-last-child(2){margin-bottom:20px}.form-horizontal .form-group:last-child{margin:0}.form-horizontal .form-group>i{color:#999;transform:translateY(-50%);position:absolute;left:5px;top:50%}.form-horizontal .form-control{color:#7ab6b6;background-color:#fff;font-size:17px;letter-spacing:1px;height:40px;padding:5px 10px 2px 25px;box-shadow:0 0 0 0 transparent;border:none;border-bottom:1px solid rgba(0,0,0,.1);border-radius:0;display:inline-block}.form-control::placeholder{color:rgba(0,0,0,.2);font-size:16px}.form-horizontal .form-control:focus{border-bottom:1px solid #7ab6b6;box-shadow:none}.form-horizontal .btn{color:#7ab6b6;background-color:#edf6f5;font-size:18px;font-weight:700;letter-spacing:1px;border-radius:5px;width:50%;height:45px;padding:7px 30px;margin:0 auto 25px;border:none;display:block;position:relative;transition:all .3s ease}.form-horizontal .btn:focus,.form-horizontal .btn:hover{color:#fff;background-color:#7ab6b6}.form-horizontal .btn:after,.form-horizontal .btn:before{content:'';background-color:#7ab6b6;height:50%;width:2px;position:absolute;left:0;bottom:0;z-index:1;transition:all .3s}.form-horizontal .btn:after{bottom:auto;top:0;left:auto;right:0}.form-horizontal .btn:hover:after,.form-horizontal .btn:hover:before{height:100%;width:50%;opacity:0}.form-horizontal .create_account{color:#d6bc8b;font-size:16px;font-weight:600;display:inline-block}.form-horizontal .create_account:hover{color:#7ab6b6;text-decoration:none}.container,.demo,.htmleaf-container,body,html{height:100%}#formbg{position:relative;top:50%;transform:translateY(-50%)}#formbg>div{margin:0 auto}.fileupload{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}.inputfile.has-focus+label,.inputfile:focus+label{outline:1px dotted #000;outline:-webkit-focus-ring-color auto 5px}.fileupload+label{height:48px;font-weight:700;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;display:inline-block;overflow:hidden;color:#7ab6b6;border:1px solid #7ab6b6;background-color:#fff;padding:0;width:100%;display:flex}.fileupload+label strong{line-height:48px;padding:0 20px;display:inline-block;color:#fff;background-color:#7ab6b6}.fileupload+label span{line-height:48px;width:auto;display:inline-block;text-overflow:ellipsis;white-space:nowrap;vertical-align:top;width:0;flex-grow:1}.fileupload+label:hover,.fileupload.has-focus+label,.fileupload:focus+label{border-color:#537777}.fileupload+label:hover strong,.fileupload.has-focus+label strong,.fileupload:focus+label strong{background-color:#537777}</style>
</head>
<body>
	<div class="htmleaf-container">
		<div class="demo form-bg">
			<div class="container">
				<div class="row" id="formbg">
					<div class="col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6">
						<form class="form-horizontal">
							<div class="heading">上传图像至轻服务</div>
							<div class="form-group">
								<i class="fa fa-lock"></i><input id="passwd" type="password" class="form-control" placeholder="上传密码" />
							</div>
							<div class="form-group">
								<input type="file" id="fileInput" class="fileupload" accept="image/*"/>
								<label for="fileInput"><span></span> <strong>选择图片</strong></label>
							</div>
							<div class="form-group">
								<button id="upload" type="button" class="btn btn-default"><i class="fa fa-arrow-right"></i></button>
								<span>数据库图片数量: <span id="rest">...</span></span>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

	</div>

</body>
<script type="text/javascript" src="https://unpkg.com/@byteinspire/js-sdk@0.5.1/dist/inspirecloud-0.5.1.min.js"></script>
<script>!function(document,window,index){var inputs=document.querySelectorAll(".fileupload");Array.prototype.forEach.call(inputs,(function(input){var label=input.nextElementSibling,labelVal=label.innerHTML;input.addEventListener("change",(function(e){var fileName="";(fileName=this.files&&this.files.length>1?(this.getAttribute("data-multiple-caption")||"").replace("{count}",this.files.length):e.target.value.split("\\").pop())?label.querySelector("span").innerHTML=fileName:label.innerHTML=labelVal})),input.addEventListener("focus",(function(){input.classList.add("has-focus")})),input.addEventListener("blur",(function(){input.classList.remove("has-focus")}))}))}(document,window,0);</script>
<script>
	const qingApi = `https://${serviceId}.api.cloudendpoint.cn`
	const inspirecloud = new InspireCloud({
		serviceId
	});
	const fileInputElement = document.getElementById('fileInput');
	const restElem = document.getElementById('rest');
	const uploadElem = document.getElementById('upload');
	const passwdElem = document.getElementById('passwd');
	uploadElem.onclick = async function () {
		if (fileInputElement.files.length > 0) {
			const pass = await fetch(qingApi + `/passwd?p=${passwdElem.value}`)
				.then(response => response.json())
			if (!pass.res) {
				alert('密码错误');
				return false;
			}
			const file = fileInputElement.files[0];
			const filename = file.name;
			uploadElem.innerHTML = '<i class="fa-solid fa-spinner"></i>'
			uploadElem.disable = true
			await inspirecloud.file.upload(filename, file, {
					token: fileUploadToken
				})
				.then((data) => {
					alert('上传成功')
					getRest()
				})
				.catch((error) => {
					alert('上传失败')
				});
			uploadElem.innerHTML = '<i class="fa fa-arrow-right"></i>'
			uploadElem.disable = false
		} else {
			alert('无文件需要上传');
			return false;
		}
		return false;
	}

	async function getRest() {
		const rest = await fetch(qingApi + `/restImage`)
			.then(response => response.json())
		restElem.innerText = rest.rest
	}
	getRest()
</script>

</html>